#city_page {
  height: 100%;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch
}
.bg{
  background-color: #fff;
}
.connent{
  flex: 1;
  overflow-y: auto;
}

.search_header{
  background: #FF4F00;
  height:88px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 30px;
  .left_header{
    height: 60px;
    width: 133px;
    color: #fff;
    font-size: 34px;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    .bg_img{
      width: 28px;
      height: 36px;
      display: block;
      margin-right: 6px;
      background: url('//f3-v.veimg.cn/m/seo/static/back.png') center no-repeat;
      background-size: cover;
    }
  }
  .middle_header{
    flex: 1;
    overflow: hidden;
    .search{
      flex: 1;
      height: 60px;
      opacity: 0.98;
      background: #FFFFFF;
      border-radius: 100px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding-left: 20px;
      padding-right: 20px;
    }
    .title{
      font-family: PingFangSC-Semibold;
      font-size: 34px;
      width: 100%;
      color: #FFFFFF;
      letter-spacing: 0;
      text-align: center;
    }
    .bg_img{
      display: block;
      width: 27px;
      height: 30px;
      margin-right: 14px;
      background: url('//f3-v.veimg.cn/m/seo/static/search.png') center no-repeat;
      background-size: cover;
    }
    input{
      width: 80%;
      display: block;
      font-size: 28px;
      line-height: 34px;
      color: #777;
      letter-spacing: 0;
    }
  }
  .right_header{
    width: 93px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    img{
      width: 50px;
      height: 50px;
      border-radius: 100px;
      display: block;
      margin-left: 25px;
    }
  }
}

.city_title{
  font-size: 36px;
  color: #4A4A4A;
  letter-spacing: 1px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  margin-bottom: 20px;
  padding: 0 50px;
  h1{
    font-weight: 500;
  }
}

.layui-tab{
  .layui-tab-title{
    font-family: PingFangSC-Regular;
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    font-size: 32px;
    color: #4A4A4A;
    letter-spacing: 0;
    line-height: 48px;
    li{
      text-align: center;
      font-size: 32px;
      h3{
        margin-bottom: 10px;
      }
      &:after{
        content: '';
        display: block;
        width: 80px;
        height: 4px;
        margin-bottom: 10px;
      }
    }
    .active{
      font-family: PingFangSC-Medium;
      color: #333333;
      &:after {
        content: '';
        width: 80px;
        height: 4px;
        background: #FF7214;
        border-radius: 100px;
        margin-bottom: 10px;
        text-align: center;
        margin-left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  .layui-tab-content{
    .layui-tab-item{
      display: none;
    }
    .active{
      display: block;
    }
  }
}

.city-card-wrap{
  padding: 0 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.city-card{
  width: 220px;
  .city-name{
    font-family: PingFangSC-Medium;
    font-size: 22px;
    color: #4A4A4A;
    letter-spacing: 0;
    text-align: center;
    margin: 10px 0 30px;
  }
  img{
    height: 114px;
    width: 100%;
  }
}

.look_more{
  a{
    display: flex;
    align-items: center;
    justify-content: center;
    padding:20px 0 26px;
  }
  .font{
    font-family: PingFangSC-Medium;
    font-size: 28px;
    color: #FF7214;
    letter-spacing: 0;
    text-align: center;
    margin-right: 10px;
  }
  .i{
    display: block;
    width: 28px;
    height: 28px;
    background: url("//f3-v.veimg.cn/m/seo/static/lookmore.png") center no-repeat;
    background-size: cover;
  }
}

.position-card-wrap{
  font-size: 24px;
}
.position-card{
  padding: 20px 40px 20px;
  border-bottom: 1px solid rgba(200,199,204,0.50);
  background-color: #fff;
  a{
    display: block;
    width: 100%;
    font-family: PingFangSC-Regular;
    font-size: 24px;
    color: #777777;
    letter-spacing: 0;
  }
  .top,.middle,.bottom{
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .position_name{
    flex: 1;
    width: 80%;
    font-size: 32px;
    color: #333333;
  }
  .company_nam,.location{
    width: 70%;
  }
  .location{
    font-size: 24px !important;
  }

  .worry{
    position: relative;
    padding-right: 80px;
    &:after{
      position: absolute;
      right: 0px;
      line-height: 32px;
      content: '急招';
      font-size: 20px;
      background: #FF7214;
      border-radius: 52px;
      color: #FFFFFF;
      padding: 4px 0px;
      min-width: 80px;
      max-width: 80px;
      text-align: center;
    }
  }

  .salary,.time{
    width: 30%;
    text-align: right;
  }
  .salary{
    color: #FF7214;
    min-width: 130px;
    font-weight: 600;
  }
  &:last-child{
    border-bottom: none;
  }
}

.hot-card-wrap{
  padding: 0 10px 0 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  .hot-card{
    width: 30%;
    text-align: left;
    margin-bottom: 20px;
    margin-right: 1.3%;
    a{
      font-family: PingFangSC-Regular;
      font-size: 28px;
      color: #4A4A4A;
      letter-spacing: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.hot-position-wrap{
  padding: 0 80px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .hot-position{
    text-align: left;
    margin-bottom: 20px;
    a{
      font-family: PingFangSC-Regular;
      font-size: 28px;
      color: #4A4A4A;
      letter-spacing: 0;
    }
    &:nth-child(2n-1) {
      width: 40%;
    }
    &:nth-child(2n) {
      width: 47%;
    }
  }
}


.footer{
  height: 120px;
  background: #333333;
  padding: 0 60px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  .left{
    flex: 1;
    .title{
      font-size: 32px;
    }
    .des{
      font-size: 24px;
      color: #C8C7CC;
    }
  }
  .regist_btn{
    width: 160px;
    height: 60px;
    line-height: 60px;
    font-size: 24px;
    letter-spacing: 1px;
    text-align: center;
    border-radius: 100px;
    background-image: linear-gradient(-90deg, #FF4F00 23%, #FF7214 100%);
  }
  .close{
    position: absolute;
    right: 0px;
    top: -32px;
    width: 46px;
    height: 36px;
    background: url("//f3-v.veimg.cn/m/seo/static/close.png") center no-repeat;
    background-size: cover;
  }
}














